<template>
  <div class="singer-main">
    <ul class="singer-firstName">
      <li class="upcase" v-for="num in singerType.index" :key="num.id">
        <a href="#" class="clearLine">{{ num.name }}</a>
      </li>
      <!-- <li class="upcase">
        <a href="#" class="clearLine">{{ num.name }}</a>
      </li> -->
      <!-- <li class="upcase"><a href="#" class="clearLine">B</a></li>
      <li class="upcase"><a href="#" class="clearLine">C</a></li>
      <li class="upcase"><a href="#" class="clearLine">D</a></li>
      <li class="upcase"><a href="#" class="clearLine">E</a></li>
      <li class="upcase"><a href="#" class="clearLine">F</a></li>
      <li class="upcase"><a href="#" class="clearLine">G</a></li>
      <li class="upcase"><a href="#" class="clearLine">H</a></li>
      <li class="upcase"><a href="#" class="clearLine">I</a></li>
      <li class="upcase"><a href="#" class="clearLine">J</a></li>
      <li class="upcase"><a href="#" class="clearLine">K</a></li>
      <li class="upcase"><a href="#" class="clearLine">L</a></li>
      <li class="upcase"><a href="#" class="clearLine">M</a></li>
      <li class="upcase"><a href="#" class="clearLine">N</a></li>
      <li class="upcase"><a href="#" class="clearLine">O</a></li>
      <li class="upcase"><a href="#" class="clearLine">P</a></li>
      <li class="upcase"><a href="#" class="clearLine">Q</a></li>
      <li class="upcase"><a href="#" class="clearLine">R</a></li>
      <li class="upcase"><a href="#" class="clearLine">S</a></li>
      <li class="upcase"><a href="#" class="clearLine">T</a></li>
      <li class="upcase"><a href="#" class="clearLine">U</a></li>
      <li class="upcase"><a href="#" class="clearLine">V</a></li>
      <li class="upcase"><a href="#" class="clearLine">W</a></li>
      <li class="upcase"><a href="#" class="clearLine">X</a></li>
      <li class="upcase"><a href="#" class="clearLine">Y</a></li>
      <li class="upcase"><a href="#" class="clearLine">Z</a></li>
      <li class="upcase"><a href="#" class="clearLine">#</a></li> -->
    </ul>
    <ul class="singer-firstName">
      <li class="upcase" v-for="area in singerType.area" :key="area.id">
        <a href="#" class="clearLine">{{ area.name }}</a>
      </li>
      <!-- <li class="upcase"><a href="#" class="clearLine">内地</a></li>
      <li class="upcase"><a href="#" class="clearLine">港台</a></li>
      <li class="upcase"><a href="#" class="clearLine">欧美</a></li>
      <li class="upcase"><a href="#" class="clearLine">日本</a></li>
      <li class="upcase"><a href="#" class="clearLine">韩国</a></li> -->
    </ul>
    <ul class="singer-firstName">
      <li class="upcase" v-for="sex in singerType.sex" :key="sex.id">
        <a href="#" class="clearLine">{{ sex.name }}</a>
      </li>
      <!-- <li class="upcase"><a href="#" class="clearLine">男</a></li>
      <li class="upcase"><a href="#" class="clearLine">女</a></li>
      <li class="upcase"><a href="#" class="clearLine">组合</a></li> -->
    </ul>
    <ul class="singer-firstName">
      <li class="upcase" v-for="genre in singerType.genre" :key="genre.id">
        <a href="#" class="clearLine">{{
          genre.name
        }}</a>
      </li>
      <!-- <li class="upcase"><a href="#" class="clearLine">流行</a></li>
      <li class="upcase"><a href="#" class="clearLine">说唱</a></li>
      <li class="upcase"><a href="#" class="clearLine">国风</a></li>
      <li class="upcase"><a href="#" class="clearLine">摇滚</a></li>
      <li class="upcase"><a href="#" class="clearLine">电子</a></li>
      <li class="upcase"><a href="#" class="clearLine">民谣</a></li>
      <li class="upcase"><a href="#" class="clearLine">说唱</a></li>
      <li class="upcase"><a href="#" class="clearLine">R&B</a></li>
      <li class="upcase"><a href="#" class="clearLine">民族乐</a></li>
      <li class="upcase"><a href="#" class="clearLine">轻音乐</a></li>
      <li class="upcase"><a href="#" class="clearLine">爵士</a></li>
      <li class="upcase"><a href="#" class="clearLine">古典</a></li>
      <li class="upcase"><a href="#" class="clearLine">乡村</a></li>
      <li class="upcase"><a href="#" class="clearLine">蓝调</a></li> -->
    </ul>
  </div>
</template>

<script lang="ts">
export default {
  name: 'SingerType',
}
</script>

<script lang="ts" setup>
import { SingerAreaList } from '@/api/singer/model/singerModel'
const props = defineProps<{ singerType: SingerAreaList }>()
console.log(props)
</script>

<style scoped>
.singer-main {
  width: 1200px;
  margin: 30px auto 20px;
  background-color: #fbfbfb;
  padding: 34px 0 17px 0;
}
.singer-firstName {
  display: flex;
  padding: 0 0 3px 40px;
}

.clearLine {
  display: inline-block;
  line-height: 26px;
  padding-left: 8px;
  font-size: 14px;
  margin: 0 12px 14px 0;
  color: #000;
}
.clearLine:hover {
  text-decoration: none;
  color: #31c27c;
}
.singer-firstName li:first-child {
  height: 26px;
  width: 50px;
  margin-right: 0 !important;
  font-size: 14px;
  background-color: #31c27c;
}
.singer-firstName li:first-child:hover {
  text-decoration: none;
}
</style>
